import { THEME_KEY, getItem, setItem } from '@/utils/storage'
import { create } from 'zustand'

export type LayoutType = 'left' | 'top'

export type themeType = 'light' | 'dark'

export interface IAppStore {
  /**
   * 样式主题
   */
  theme: themeType
  /**
   * 侧边栏开关
   */
  collapsed: boolean
  /**
   * 布局
   */
  layout: LayoutType
  /**
   * 设置主题模式
   * @param isDark
   * @returns
   */

  updateTheme: () => void
  /**
   * 切换侧边栏状态
   * @returns
   */
  updateCollapsed: () => void
  /**
   * 修改布局
   * @param layout // left | top
   * @returns
   */
  changeLayout: (layout: LayoutType) => void
}

export const useAppStore = create<IAppStore>(set => ({
  theme: getItem(THEME_KEY) || 'light',
  collapsed: false,
  layout: 'left',
  updateTheme: () => {
    set(state => {
      const newTheme = state.theme === 'light' ? 'dark' : 'light'
      setItem(THEME_KEY, newTheme)
      return {
        theme: newTheme
      }
    })
  },
  updateCollapsed: () => {
    set(state => {
      return {
        collapsed: !state.collapsed
      }
    })
  },
  changeLayout: layout => set({ layout })
}))
